<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/v1.css" media="all" />
		<link rel="stylesheet" href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css">


		<link rel="stylesheet" type="text/css" href="__JS__/webuploader/webuploader.css">



		<script type="text/javascript">
			var SYS		= {'root':'__STATIC__'},
				CONFIG	= {$pageConfig};
		</script>
	</head>
	<body>
		<div id="admin-page">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>上传测试</legend>
			</fieldset>
				<div class="layui-form-item">
					<label class="layui-form-label">缩略图</label>
					<div class="layui-input-inline">
			            <div id="uploadimg">
			                <div id="fileList" class="uploader-list"></div>
			                <div class="layui-input-inline">
			                <div id="imgPicker">选择图片</div>
			                </div>

			                <div class="layui-input-inline">
			                <div id="ctlBtn2" class="layui-btn">开始上传</div>
			                </div>
			            </div>
					</div>
				</div>

		</div>
		<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="__STATIC__/admin/js/admin.js"></script>

		<script type="text/javascript" src="__JS__/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="__JS__/webuploader/webuploader.js"></script>

		<script type="text/javascript">
			layui.use(['laytpl','form','jquery','webuploader'] , function(){
			  var	laytpl = layui.laytpl,
			 		layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form(),
					$ = layui.jquery;
			  //使用方式跟独立组件完全一样



			});
		</script>


<script>
$(function(){
     var $btn2= $('#ctlBtn2');
    //上传图片
     // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: false,

        // swf文件路径
        swf: '../js/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: 'http://www.test.com/admin/index/upload/',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
        	id : '#imgPicker',
        	multiple:false,
        },

       	fileNumLimit :2,

        disableGlobalDnd: true,//禁用浏览器的拖拽功能，否则图片会被浏览器打开

        chunked: false,

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        //uploader.removeFile(uploader.getFile(1));
    	var container = $('#fileList');

        //container.html('');
        //uploader.reset();

    	console.log('新增文件');
    	console.log(file);
        var $list = $("#fileList"),
            $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<div class="layui-progress" lay-filter="progress" lay-showPercent="yes"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div></div>' +
                '</div>'
                ),
            $img = $li.find('img');

        console.log($list);

        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 150, 150 );

console.log( Base.formatSize( 100 ) ); 
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
/*        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }
*/
            layui.use(['element','jquery'] , function(){
              var   element = layui.element(),
                    $ = layui.jquery;
              //使用方式跟独立组件完全一样

              element.progress('progress', percentage * 100 + '%');

            });
        
        //$percent.css( 'width', percentage * 100 + '%' );
    });
    uploader.on('beforeFileQueued',function(file){
        //队列前的处理
        //处理掉之前的数据,但是记录还会存在,并不会上传
        for (var i = uploader.getFiles().length - 1; i >= 0; i--) {
            uploader.removeFile(uploader.getFiles()[i],true);
        }
        console.log('处理了'+(i+1)+'条数据');
    });
    uploader.on('fileDequeued', function(file){
        //移除html显示
        $('#'+file.id).off().hide("fast",function(){$(this).remove()});
    });
    uploader.on('uploadBeforeSend',function(object,data,header) {  
        var tt=$("input[name='id']").val();  
        data=$.extend(data,{  
            test : 123,
            name : 'test',
        });
    }); 
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,response) {
        $( '#'+file.id ).addClass('upload-state-done');
        console.log('文件上传成功');
        console.log(response);

    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

	//上传文件个数超出限制
	uploader.on('error', function(handler) {
	if (handler == "Q_EXCEED_NUM_LIMIT") {

		alert("文件数量超出限制");

	}
	});

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
    $btn2.on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.upload();
            // if (state === 'ready') {
            //     uploader.upload();
            // } else if (state === 'paused') {
            //     uploader.upload();
            // } else if (state === 'uploading') {
            //     uploader.stop();
            // }
        });

/*    $('#ctlBtn1').on('click',function(){
        console.log('test');
        console.log(uploader.getFiles());
        for (var i = uploader.getFiles().length - 1; i >= 0; i--) {
            uploader.removeFile(uploader.getFiles()[i],true);
        }
        console.log(uploader.getFiles());

        $('#imgPicker>>input').click();
    });*/

});

		</script>

	</body>
</html>